<template>
  <div>
    <!--工具类-->
    <Row style="text-align: left" v-model="status.modalSearch.isShow">
      <i-col span="24">
        <Row style="margin-top: 0.8rem">
          <i-col span="24" class="operation_item y_query_right">
            <DatePicker type="datetime"  :options="dateRange" @on-change="chooseStartDate"
                        placement="bottom-end" placeholder="选择起始日期时间" class="modal_form_input y_condition" format="yyyy-MM-dd"
                        style="width: 200px"></DatePicker>
            <DatePicker type="datetime"  :options="dateRange" @on-change="chooseEndDate"
                        placement="bottom-end" placeholder="选择结束日期时间" class="modal_form_input y_condition" format="yyyy-MM-dd"
                        style="width: 200px"></DatePicker>
            <Button type="primary" style="margin-right: 10px" icon="ios-search" @click="search" class="y_condition">查询</Button>
          </i-col>
        </Row>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :columns="tableTitles" :data="keyWordList" ref="orderList"
           class="table_css" no-data-text="暂无数据" ></Table>-->

    <List border class="data-list">
      <template v-if="keyWordList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item, index) in keyWordList" :key="index" class="list-item">
          <div class="item-top">
            <KeyValueView title="用户输入关键词" :value="item.keyWordList"></KeyValueView>
            <KeyValueView title="搜索关键词" :value="item.searchKeyword"></KeyValueView>
            <KeyValueView title="搜索次数"><a style="padding:6px;font-size:13px;color:#448aff" @click="getKeywordDetail(item.inputKeyword)">{{item.searchCount}}</a></KeyValueView>
          </div>
        </ListItem>
      </template>
    </List>

    <div style="float: right; margin-top: 20px;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>


    <!--发货-->
    <Modal
      v-model="status.modalDetail.isShow" :title="status.modalDetail.title"
      :closable="true" :mask-closable="true"
      :styles="{top: '20px',bottom:'20px',width:'70%',}">
      <div style="padding-bottom: 3em">
        <!--表格和分页-->
<!--        <Table stripe border :columns="detailTableTitles" :data="keyWordDetailList" ref="orderList"-->
<!--               class="table_css" no-data-text="暂无数据" ></Table>-->
        <List border class="data-list">
          <template v-if="keyWordDetailList == null || keyWordDetailList.length == 0">
            <ListItem class="list-item">
              <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
            </ListItem>
          </template>
          <template v-else>
            <ListItem v-for="(item, index) in keyWordDetailList" :key="index" class="list-item">
              <div class="item-top">
                <KeyValueView title="用户名" :value="getHideUerName(item.userName)"></KeyValueView>
                <KeyValueView title="输入关键词" :value="item.inputKeyword"></KeyValueView>
                <KeyValueView title="搜索关键词" :value="item.searchKeyword"></KeyValueView>
                <KeyValueView title="返回结果数" :value="item.result"></KeyValueView>
                <KeyValueView title="搜索时间" :value="$tiyBJTime(item.createtime)"></KeyValueView>
                <KeyValueView title="终端类型" :value="getDeviceType(item.deviceType)"></KeyValueView>
              </div>
            </ListItem>
          </template>
        </List>

        <div style="float: right; margin-top: 20px;">
          <Page :total="detailPage.total" :page-size="detailPage.stepNumber" :current="detailPage.currentPage" @on-change="detailChangePage"
                @on-page-size-change="detailSizeChange" :page-size-opts="[40,60,80,120]"
                show-sizer show-elevator/>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>


  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/keyword/data"
  import {
    init,
    webList,
    webKkeywordDetail
  } from "./js/keyword/funs"
  import Operation from "view-design/src/components/transfer/operation";
  import KeyValueView from "../widgets/KeyValueView";
  import {isEmpty} from "../js/commonUtils";

  export default {
    components: {KeyValueView, Operation, ICol},
    data(){
      return {
        tRole:{//权限
        },
        tPage: tiyData.tPage,
        detailPage :tiyData.tParams.detailParams.page,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams.searchParams,
        tData: tiyData.tData,
        keyWordList: tiyData.tData.keyWordList,
        keyWordDetailList: tiyData.tData.keyWordDetailList,
        dateRange: tiyData.tData.dateRange,
        tableTitles:tiyData.tableTitles(this),
        detailTableTitles:tiyData.detailTableTitles(this),
      }
    },
    computed : {

    },
    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      detailChangePage(page){
        tiyData.tParams.detailParams.page.currentPage = page;
        webKkeywordDetail(this, tiyData);
      },
      detailSizeChange(p){
        tiyData.tParams.detailParams.page.stepNumber = p;
        webKkeywordDetail(this, tiyData);
      },
      chooseStartDate(date){
        tiyData.tParams.searchParams.startCreatedate = date +' 00:00:00';
      },
      chooseEndDate(date){
        tiyData.tParams.searchParams.endCreatedate = date+' 23:59:59';
      },
      getKeywordDetail(inputKeyword){
        tiyData.tParams.detailParams.inputKeyword = inputKeyword;
        webKkeywordDetail(this, tiyData);
      },
      getHideUerName(userName) {
        if(isEmpty(userName)) {
          return "";
        }
        return this.$tiyHideUsername(userName);
      },
      getDeviceType(type) {
        let device = '';
        switch(type){
          case 1:
            device = 'Android';
            break;
          case 2:
            device = 'IOS';
            break;
          case 3:
            device = 'PC';
            break;
          case 4:
            device = 'Mobile PC';
            break;
          default:
            break;
        }
        return device;
      }
    },
    mounted(){
      init(this, tiyData);
      // webList(this,tiyData)
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional) "../css/base.less";

  .table_css {
    margin: 1rem 0px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_form_input {
    width: 200px;
    margin-right: 10px;

  }

  .order_product_div {
    margin-top: 1rem;

  }
  .order_product_row {
    background: #f3f3f6;
    padding: 1rem;
    border: .0625rem solid #dbdbdb;
    border-bottom-style: none;
  }

  .key{
    .tiy_key;
  }

.data-list {
  margin: 1rem 0rem;
  line-height: 25px;
  .list-item {
    .flex-colum-wrap;
    justify-items: left;
    align-items: start;
    .item-checkbox {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      vertical-align: top;
    }
    .item-img {
      width: 130px;
      text-align: center;
      display: inline-block;
    }
    .item-top{
      width: 100%;
      margin-bottom: 5px;
      .flex-row-wrap;
      justify-content: left;
    }
    .item-content {
      margin-bottom: 35px;
      text-align: left;
    }
    .item-bottom{
      //position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      //padding: 0 1rem 0.5rem 0;
      text-align: right;
      button {
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
